@import "less/css3";
@import "less/reset";
@import "less/z";

@font-face {
  font-family: "Raphaelicons";
  src: url('../fonts/raphaelicons-webfont.eot') format('eot'),
       url('../fonts/raphaelicons-webfont.svg') format('svg'),
       url('../fonts/raphaelicons-webfont.ttf') format('truetype'),
       url('../fonts/raphaelicons-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Hex-monograms";
  src: url('../fonts/Hex-monograms.otf') format('otf'),
  url('../fonts/Hex-monograms.ttf') format('truetype'),
  url('../fonts/Hex-ornate.otf') format('otf'),
  url('../fonts/Hex-ornate.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ch';
  src: url(../fonts/ch.woff) format('woff');
}
@font-face {
  font-family: 'Snaker';
  src: url(../fonts/SnackerComic_PerosnalUseOnly.ttf) format('truetype');
}
@font-face {
  font-family: 'DK';
  src: url(../fonts/DK%20Prince%20Frog.otf) format('otf');
}
@font-face {
  font-family: 'jf';
  src: url(../fonts/jf_016d6dc2cdad.woff) format('woff');
}
@font-face {
  font-family: 'Georgia';
  src:url(../fonts/Georgia.ttf) format('truetype');
}
@font-face {
  font-family: 'Serif';
  src:url(../fonts/micross0.ttf) format('truetype'),
      url(../fonts/Serif.ttf) format('truetype');
}
/* latin */
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Josefin Slab'), local('JosefinSlab'), url(../fonts/46aYWdgz-1oFX11flmyEfegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin */
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Josefin Slab Bold'), local('JosefinSlab-Bold'), url(../fonts/NbE6ykYuM2IyEwxQxOIi2HNuWYKPzoeKl5tYj8yhly0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

.reset();

body{
  font-family: 'Georgia','Serif';
  background: #ddd;
  font-weight: 400;
  font-size: 15px;
  color: #333;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a{
  text-decoration: none;
  color: #555;
}
.clr{
  width: 0;
  height: 0;
  overflow: hidden;
}

.st-container{
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;
  overflow: hidden;
  >input,>a{
    width: 20%;
    height: 34px;
    line-height: 34px;
    position: fixed;
    bottom:0;
    cursor: pointer;
  }
  >input{
    opacity: 0;
    z-index: 2;
    &:hover + a{
      background-color: #459eaf;
    }
    &:checked + a{
      background: #3c8d9c;
      &:after{
        content: '';
        width: 0;
        height:0;
        overflow: hidden;
        border:20px solid transparent;
        border-bottom-color: #3c8d9c;
        position: absolute;
        bottom: 100%;
        left:50%;
        margin-left: -20px;
      }
    }
  }
  >a{
    font-weight: 700;
    font-size: 16px;
    background: #84cad7;
    text-align: center;
    color: #F3FAFB;
    text-shadow: 1px 1px 1px rgba(132,202,235,0.2);
    z-index: 1;
  }
  #st-control-1,#st-control-1 + a{
    left:0;
  }
  #st-control-2,#st-control-2 + a{
    left:20%;
  }
  #st-control-3,#st-control-3 + a{
    left:40%;
  }
  #st-control-4,#st-control-4 + a{
    left:60%;
  }
  #st-control-5,#st-control-5 + a{
    left:80%;
  }
}

.st-scroll,.st-panel{
  width: 100%;
  height: 100%;
  position: relative;
}
.st-scroll{
  left:0;
  top:0;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  transition:transform 0.6s ease-in-out;
  -webkit-transition:transform 0.6s ease-in-out;
}
.st-panel{
  background-color: #F3FAFB;
  overflow: hidden;
  .st-desc{
    width:200px;
    height: 200px;
    background: #88d6e5;
    position: absolute;
    left:50%;
    top:0;
    margin-left: -100px;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
  }
  h2,h3{
    color:#84cad7;
    text-align: center;
    font-weight: 300;
    width: 80%;
    position: absolute;
    left:10%;
    top: 50%;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    text-shadow: 1px 1px 1px rgba(132,202,235,0.2);
    backface-visibility: hidden;
  }
  h2{
    font-size: 54px;
    line-height: 50px;
    font-family: 'ch';
  }
  h3{
    font-size: 35px;
    line-height: 40px;
  }
  p{
    position: absolute;
    width: 50%;
    left: 25%;
    top: 60%;
    font-size: 25px;
    line-height: 50px;
    padding:0;
    text-align: center;
    backface-visibility: hidden;
    color: #8b8b8b;
  }
  @media screen and (max-width: 480px){
    p{
      font-size: 14px;
    }
  }
}

.st-color{
  background: #88d6e5;
  .st-desc{
    background: #F3FAFB;
  }
  [data-icon]:after{
  color: #88d6e5;
  }
  h2,h3,h3 a{
    color: #F3FAFB;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
  }
  p{
    font-family: 'DK';
    color: rgba(255,255,255,0.8);
  }
}
#st-ch{
  font-family: 'Snaker';
  font-size: 110px;
}
#st-panel-4 #line{
  height: 1px;
  width:200px;
  background: #F3FAFB;
  position: absolute;
  left:50%;
  top:80%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
#st-panel-5{
  h3{
    font-weight: 900;
  }
  p{
    font-family: 'DK';
  }
}

#st-control-1:checked ~ .st-scroll{
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
  transform: translateY(-200%);
  -webkit-transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll{
  transform: translateY(-300%);
  -webkit-transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
  transform: translateY(-400%);
  -webkit-transform: translateY(-400%);
}

[data-icon]:after{
  content: attr(data-icon);
  font-family: "Hex-monograms";
  width: 200px;
  height: 200px;
  color: #F3FAFB;
  font-size: 90px;
  text-align: center;
  line-height: 200px;
  position: absolute;
  left:59%;
  top:61%;
  margin:-100px 0 0 -100px;
  transform: rotate(-45deg) translateY(25%);
  -webkit-transform: rotate(-45deg) translateY(25%);
  text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
@keyframes moveDown {
  0%{
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
    opacity: 0;
  }
  100%{
    transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    opacity: 1;
  }
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2 {
  -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  animation: moveDown 0.6s ease-in-out 0.2s backwards;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h3,
#st-control-2:checked ~ .st-scroll #st-panel-2 h3,
#st-control-3:checked ~ .st-scroll #st-panel-3 h3,
#st-control-4:checked ~ .st-scroll #st-panel-4 h3,
#st-control-5:checked ~ .st-scroll #st-panel-5 h3 {
  -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
  animation: moveDown 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveUp {
  0%{
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
    opacity: 0;
  }
  100%{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    opacity: 1;
  }
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p {
  animation: moveUp 0.6s ease-in-out 0.2s backwards;
  -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@media screen and (max-width: 520px) {
  .st-panel h2{
    font-size: 42px;
    p{
      width: 90%;
      left: 10%;
      margin-top: 0;
    }
  }
  .st-container >a{
    font-size: 13px;
  }
}
@media screen and (max-width: 360px) {
  .st-container >a{
    font-size: 10px;
  }
  .st-desc{
    width:120px;
    height: 120px;
    margin-left: -60px;
  }
  [data-icon]:after{
    font-size: 60px;
    -webkit-transform: translateY(15) rotate(45deg);
    transform: translateY(15) rotate(45deg);
  }
}
@keyframes footLeft {
  0%{
    left:3%;
    bottom:10%;
    opacity: 1;
  }
  5%{
    left:3%;
    bottom:10%;
    opacity: 0;
  }
  10%{
    left:8%;
    bottom:15%;
    opacity: 1;
  }
  15%{
    left:8%;
    bottom:15%;
    opacity: 0;
  }
  20%{
    left:18%;
    bottom:25%;
    opacity: 1;
  }
  25%{
    left:18%;
    bottom:25%;
    opacity: 0;
  }
  30%{
    left:28%;
    bottom:35%;
    opacity: 1;
  }
  35%{
    left:28%;
    bottom:35%;
    opacity: 0;
  }
  40%{
    left:38%;
    bottom:45%;
    opacity: 1;
  }
  45%{
    left:38%;
    bottom:45%;
    opacity: 0;
  }
  50%{
    left:48%;
    bottom:55%;
    opacity: 1;
  }
  55%{
    left:48%;
    bottom:55%;
    opacity: 0;
  }
  60%{
    left:58%;
    bottom:65%;
    opacity: 1;
  }
  65%{
    left:58%;
    bottom:65%;
    opacity: 0;
  }
  70%{
    left:68%;
    bottom:75%;
    opacity: 1;
  }
  75%{
    left:68%;
    bottom:75%;
    opacity: 0;
  }
  80%{
    left:78%;
    bottom:85%;
    opacity: 1;
  }
  85%{
    left:78%;
    bottom:85%;
    opacity: 0;
  }
  90%{
    left:88%;
    bottom:95%;
    opacity: 1;
  }
  95%{
    left:88%;
    bottom:95%;
    opacity: 0;
  }
  100%{
    left:98%;
    bottom: 105%;
    opacity: 1;
  }

}
@keyframes footRight {
  0%{
    left:3%;
    bottom:4%;
    opacity: 1;
  }
  5%{
    left:3%;
    bottom:4%;
    opacity: 0;
  }
  10%{
    left:13%;
    bottom:14%;
    opacity: 1;
  }
  15%{
    left:13%;
    bottom:14%;
    opacity: 0;
  }
  20%{
    left:23%;
    bottom:24%;
    opacity: 1;
  }
  25%{
    left:23%;
    bottom:24%;
    opacity: 0;
  }
  30%{
    left:33%;
    bottom:34%;
    opacity: 1;
  }
  35%{
    left:33%;
    bottom:34%;
    opacity: 0;
  }
  40%{
    left:43%;
    bottom:44%;
    opacity: 1;
  }
  45%{
    left:43%;
    bottom:44%;
    opacity: 0;
  }
  50%{
    left:53%;
    bottom:54%;
    opacity: 1;
  }
  55%{
    left:53%;
    bottom:54%;
    opacity: 0;
  }
  60%{
    left:63%;
    bottom:64%;
    opacity: 1;
  }
  65%{
    left:63%;
    bottom:64%;
    opacity: 0;
  }
  70%{
    left:73%;
    bottom:74%;
    opacity: 1;
  }
  75%{
    left:73%;
    bottom:74%;
    opacity: 0;
  }
  80%{
    left:83%;
    bottom:84%;
    opacity: 1;
  }
  85%{
    left:83%;
    bottom:84%;
    opacity: 0;
  }
  90%{
    left:93%;
    bottom:94%;
    opacity: 1;
  }
  95%{
    left:93%;
    bottom:94%;
    opacity: 0;
  }
  100%{
    left:103%;
    bottom: 104%;
    opacity: 1;
  }

}
.foot{
  img{
    width:50px;
    height: 50px;
    position: absolute;
    display: block;
  }
  #left-foot{
    left:3%;
    bottom:10%;
    -webkit-transform: rotate(84deg);
    transform: rotate(84deg);
    animation: footLeft 40s ease-in-out 2s backwards infinite;
  }
  #right-foot{
    left:3%;
    bottom:4%;
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
    animation: footRight 40s ease-in-out 4s backwards infinite;
  }
}